<template>
    <div>
        <!-- 系统菜单 -->
        <a-col :span="6">
            <a-card class="matrix-page-content-card-fix" style="height: 95vh;overflow-y:auto">
                <a-directory-tree :tree-data="treeData"
                                  :loading="loadTree"
                                  @select="onSelect">
                </a-directory-tree>
            </a-card>
        </a-col>
        <!-- 菜单表格 -->
        <a-col :span="18">
            <a-card class="matrix-page-content-card-fix" style="height: 95vh">
                <m-table
                    :columns="columns"
                    :dataSource="dataSource"
                    :loading="loadTable"
                    bordered
                    :rowKey="(record,index)=>{return index}"
                    :row-click="customRowTest"
                    :pagination="dataPagination"
                >
                    <template slot="action" slot-scope="text, record" v-if="!record.isEmpty">
                        <div>
                            <span>
                                <a-button type="primary" size="small" v-if="record.permissionType == 'menu'"
                                          v-has="'btn_SEM3300_add'"
                                          @click="() => addData(record)">{{$t('btn.add')}}</a-button>
                                <a-button type="primary" size="small" style="margin-left: 5px"
                                          v-has="'btn_SEM3300_update'"
                                          @click="() => updateData(record)">{{$t('btn.update')}}</a-button>
                                <a-popconfirm
                                    :title="$t('menuItem.confirmDel')"
                                    :okText="$t('menuItem.confirm')"
                                    :cancelText="$t('menuItem.cancel')"
                                    @confirm="() =>deleteData(record)"
                                >
                                    <a-button type="danger" v-has="'btn_SEM3300_delete'" size="small"
                                              style="margin-left: 5px">{{$t('btn.delete')}}</a-button>
                                </a-popconfirm>
                            </span>
                        </div>
                    </template>
                </m-table>
            </a-card>
        </a-col>

        <!-- 新增/編輯权限 -->
        <a-modal centered
                 width="30%"
                 :visible="capvisible"
                 :title="$t('menuItem.AddOrUpdatePermission')"
                 :okText="$t('menuItem.confirm')"
                 :cancelText="$t('menuItem.cancel')"
                 @ok="addAndEdithandleOk"
                 @cancel="caphandleCancel">
            <a-card>
                <a-form-model
                    :model="capForm"
                    labelAlign="right"
                    layout="inline"
                    ref="capForm"
                    :rules="rules"
                    :label-col="{span: 10}"
                    :wrapper-col="{span: 14}"
                >
                    <a-row style="margin:1rem 0">
                        <a-col>
                            <a-form-model-item :label="$t('menuItem.PermissionType')">
                                <a-radio-group v-model="capForm.type" prop="type">
                                    <a-radio value="1">
                                        {{$t('menuItem.PermissionMenu')}}
                                    </a-radio>
                                    <a-radio value="2">
                                      {{$t('menuItem.Permissionbtn')}}
                                    </a-radio>
                                </a-radio-group>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row style="margin:1rem 0">
                        <a-col>
                            <a-form-model-item :label="$t('menuItem.PermissionName')" prop="name" style="width: 100%;">
                                <a-input v-model="capForm.name"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row style="margin:1rem 0">
                        <a-col>
                            <a-form-model-item :label="$t('menuItem.PermissionCode')" prop="code" style="width: 100%;">
                                <a-input :disabled="isFlag == 'EDIT'" v-model="capForm.code"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>

                </a-form-model>
            </a-card>
        </a-modal>


    </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import MTable from "../../../components/MTable";

export default {
    name: 'PermissionManage',
    components: {MTable},
    data() {
        return {
          columns: [
            {
              title: this.$t('menuItem.PermissionManagerName'),
              dataIndex: 'permissionName',
              key: 'permissionName',
              align: 'center',
            },
            {
              title: this.$t('menuItem.PermissionManagerType'),
              dataIndex: 'permissionType',
              key: 'permissionType',
              align: 'center',
            },
            {
              title: this.$t('menuItem.UserTableOperation'),
              dataIndex: 'action',
              key: 'action',
              align: 'center',
              scopedSlots: {customRender: 'action'},
            },
          ],
            rules: {
                code: [{required: true, message: this.$i18n.tc('menuItem.PleasePermissionCode')}]
            },
            windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
        }
    },
    computed: {
        ...mapState('js3300', ['dataPagination','treeData', 'isFlag', 'loadTree', 'dataSource','loadTable', 'capForm', 'capvisible']),
    },
    watch: {
        // 监听新增编辑弹窗
        '$store.state.js3300.capvisible': {
            deep: true,
            handler(val) {
                if (!val) {
                    this.$refs.capForm.resetFields();
                }
            }
        },
        windowHeight(val){
            this.setTableHeight()
        }
    },
    beforeMount() {
        this.setTableHeight()
    },
    methods: {
        ...mapMutations('js3300', ['setDataPagination','queryMenu', 'clearTable', 'caphandleOk', 'customRow', 'caphandleCancel',
            'addData', 'updateData', 'deleteData', 'queryData', 'setTreeSelect']),
        setTableHeight(){
            let pageSize = parseInt((document.documentElement.clientHeight - 200) / 41)
            this.setDataPagination({
                ...this.dataPagination,
                pageSize: pageSize,
            })
        },
        // 设置选中行
        customRowTest(record) {
            this.customRow(record)
        },
        // 选中节点
        onSelect(keys, event) {
            let obj = {
                id: keys[0],
                title: event.node.title,
                isLeaf: event.node.isLeaf,
                type: event.selectedNodes[0].$options.propsData.dataRef.type
            }
            this.setTreeSelect(obj)
        },
        // 新增编辑角色弹窗确认
        addAndEdithandleOk() {
            this.$refs.capForm.validate(valid => {
                if (valid) {
                    this.caphandleOk()
                }
            })
        }
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                window.fullHeight = document.documentElement.clientHeight;
                this.windowHeight = window.fullHeight;
            })();
        };
        // 查询权限树
        this.queryMenu()
        // 清除table数据
        this.clearTable()
    },
}
</script>


<style scoped>

</style>
